<template>
    <div class="articles">
       <div class="articles-body">
        <div v-for="(article,index) in articles" v-bind:key="index">
          <el-card>
            <div style="text-align: left">
            <div style="margin-bottom: 10px">
                <span class="paper-title" @click="gotoPaper(article.paper_id)">{{article.paper_title}}</span>
            </div>
            <span v-for="(j, index) in article.authors" :key="index" class="author-name">
                    <span @click="gotoSch(j.author_id)">{{j.author_name}}</span>
                    <span v-if="index<article.authors.length-1" style="color: #A0A0A0; font-size: 14px"> / </span>
                    </span>
            <span class="publish-year"> · {{article.year}}</span>
            </div>

            <div style="text-align:left;margin-top:10px;">
            <span class="abstract">{{article.abstract|ellipsis}}</span>
            </div>

            <div class="citation-count">
            <span v-if="article.is_collect">&nbsp;已收藏</span>
            <span v-if="!article.is_collect">&nbsp;未收藏</span>
            <span>&nbsp;&nbsp;{{ article.citation_count }}&nbsp;被引用</span>
            </div>
          </el-card>
          <div>
            <h1 v-if="!articles.length">已经到底了！</h1>
          </div>
            

        </div>
      </div>
    </div>
  
</template>

<script>
export default {
    props:["articles"],
    data() {
        return {
            users:[{id:1,value:12}]
        }
    },
    methods: {
     
      gotoSch(author_id) {
      let routeUrl = this.$router.resolve({
        path: '/schPortal',
        query: { v: author_id }
      });
      window.open(routeUrl .href, "_self");
    },
    gotoPaper(paper_id) {
      let routeUrl = this.$router.resolve({
        path: '/article',
        query: { v: paper_id }
      });
      window.open(routeUrl .href, "_self");
    }
    },
    filters: {
    ellipsis: function(value) {
      if (!value) return "";
      if (value.length > 300) {
        return value.slice(0,300) + "...";
      }
      return value;
    },
    
  },
  watch:{
      articles:{
        deep:true,
        handler(newValue,oldValue)
        {
          console.log("检测到结果更新 强制刷新页面")
        }
      }
    }
    
}
</script>

<style scoped>
.author-name {
    color: #2d94d4;
    cursor: pointer;
    font-size: 14px;
}

.paper-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    font-family: Tahoma,fantasy;
}

.abstract {
    cursor: pointer;
    font-family: Georgia, Lato-Regular,Lato,sans-serif;
    font-size: 15px;
    line-height: 22px;
    color: #262625;
}

.citation-count {
    margin-top: 10px;
    font-family: "Trebuchet MS", fantasy;
    font-size: 13px;
    font-weight: 400;
    color: #73716f;
    line-height: 22px;
}

.publish-year {
    color:grey;
    font-size: 14px;
}

.author-affiliation {
    color:grey;
    font-size: 14px;
}
</style>